<template>
    <Modal
            class-name="system-role-bind-menu-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            title="菜单列表"
            width="550"
            :styles="{top: '50px'}"
            @on-cancel="close">

	    <vxe-table
		    j-loading="menu.queryMyAuthMenus"
		    ref="tableRef"
		    height="300"
		    row-id="id"
		    :column-config="{resizable: true}"
		    :checkbox-config="{checkRowKeys: selectedMenus, checkStrictly: checkStrictly}"
		    :tree-config="{expandAll: true}"
		    :data="list"
		    @checkbox-change="handleSelect">
		    <vxe-column type="checkbox" align="center" width="60"/>
		    <vxe-column field="name" title="菜单名称" tree-node/>
		    <vxe-column field="code" title="菜单编码"/>
		    <vxe-column field="remark" title="备注信息"/>
	    </vxe-table>

        <template slot="footer">
            <Button type="primary" class="button-wide" @click="handleSave" :disabled="querying">保存</Button>
        </template>
    </Modal>
</template>

<script>
    import JBoot, {Utils} from "jboot-env";

    export default JBoot.dialogList({
        data() {
            return {
                moduleName: 'menu',
	            queryMethod: 'queryMyAuthMenus',
	            checkStrictly: true
            }
        },

        computed: {
            selectedMenus ({parentParam}){
                return Utils.blank2Default(parentParam.resources, []).map(item => item.id);
            }
        },

        methods: {
            handleSelect ({records}){
                this.selection = records ?? [];
            },

	        queryAfterHandler (){
            	this.handleSelect(this.parentParam.resources ?? []);

            	this.$nextTick(function () {
            		const instance = this.$getRef('tableRef');

		            instance.setAllTreeExpand(true);

		            setTimeout(() => {
			            const rows = this.selectedMenus.map(instance.getRowById);

			            instance.setCheckboxRow(rows, true);

			            this.checkStrictly = false;
		            }, 100);
	            });
	        },

            handleSave (){
            	const instance = this.$getRef('tableRef');

	            const records = instance.getCheckboxRecords();

	            const indeterminate = instance.getCheckboxIndeterminateRecords();

                this.$emit('save', records.concat(indeterminate));

                this.close();

	            this.checkStrictly = true;
            }
        }
    });
</script>

<style lang="scss">
    .system-role-bind-menu-dialog-wrap {
	    & .ivu-table-row .ivu-checkbox-wrapper-disabled{
		    visibility: hidden;
	    }
    }
</style>
